<template>
	<view class="checkout-page">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 配送方式 -->
			<view class="checkout-section">
				<view class="section-header">
					<text class="section-title">配送方式</text>
				</view>
				<view class="delivery-options">
					<view class="delivery-option" :class="{ active: deliveryType === 'express' }"
						@click="changeDeliveryType('express')">
						<uni-icons type="truck" size="16" color="#fff" />
						<text>快递配送</text>
					</view>
					<view class="delivery-option" :class="{ active: deliveryType === 'pickup' }"
						@click="changeDeliveryType('pickup')">
						<uni-icons type="shop" size="16" />
						<text>门店自提</text>
					</view>
				</view>
				<view class="address-info" @click="selectAddress">
					<view class="address-icon">
						<uni-icons :type="deliveryType === 'express' ? 'map-pin' : 'shop'" size="20"
							color="var(--primary-color)" />
					</view>
					<view class="address-details">
						<view class="address-contact">
							{{ deliveryType === 'express' ? '张小明 13800138000' : '名创优品南山科技园店' }}
						</view>
						<view class="address-text">
							{{ deliveryType === 'express' ?
						'广东省深圳市南山区科技园南区科技南十二路2号名创优品大厦5楼' :
						'广东省深圳市南山区科技园南区科技南十二路2号' }}
						</view>
						<view v-if="deliveryType === 'pickup'" class="address-text"
							style="color: var(--primary-color);">
							营业时间: 10:00-22:00
						</view>
					</view>
					<view class="address-arrow">
						<uni-icons type="right" size="16" color="#ccc" />
					</view>
				</view>
			</view>

			<!-- 订单商品 -->
			<view class="checkout-section">
				<view class="section-header">
					<text class="section-title">名创优品旗舰店</text>
				</view>
				<view class="order-items">
					<!-- 商品1 -->
					<view class="order-item">
						<view class="order-item-image">
							<image
								src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
								mode="aspectFill" />
						</view>
						<view class="order-item-info">
							<view class="order-item-title">便携式蓝牙音箱 无线迷你音响</view>
							<view class="order-item-sku">颜色：蓝色 | 容量：标准版</view>
							<view class="order-item-price-qty">
								<view class="order-item-price">¥49.9</view>
								<view class="order-item-qty">x1</view>
							</view>
						</view>
					</view>

					<!-- 商品2 -->
					<view class="order-item">
						<view class="order-item-image">
							<image
								src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
								mode="aspectFill" />
						</view>
						<view class="order-item-info">
							<view class="order-item-title">不锈钢保温杯 真空双层保温水杯</view>
							<view class="order-item-sku">颜色：粉色 | 容量：500ml</view>
							<view class="order-item-price-qty">
								<view class="order-item-price">¥39.9</view>
								<view class="order-item-qty">x1</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="checkout-section">
				<view class="section-header">
					<text class="section-title">支付方式</text>
				</view>
				<view class="payment-options">
					<view class="payment-option">
						<view class="payment-icon">
							<uni-icons type="weixin" size="18" color="#09BB07" />
						</view>
						<view class="payment-name">微信支付</view>
						<view class="payment-selected">
							<uni-icons type="checkbox" size="28" color="var(--primary-color)" />
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="checkout-section">
				<view class="section-header">
					<text class="section-title">订单信息</text>
				</view>
				<view class="checkout-rows">
					<view class="checkout-row">
						<text>商品金额</text>
						<text>¥89.8</text>
					</view>
					<view class="checkout-row">
						<text>运费</text>
						<text>¥0.0</text>
					</view>
					<view class="checkout-row">
						<text>优惠</text>
						<text class="checkout-row-value">-¥10.0</text>
					</view>
					<view class="checkout-row">
						<text>实付金额</text>
						<text class="checkout-row-value">¥79.8</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 结算底部 -->
		<view class="checkout-footer">
			<view class="checkout-total">
				实付款: <text class="checkout-total-price">¥79.8</text>
			</view>
			<button class="checkout-button" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';

const deliveryType = ref('express');

const changeDeliveryType = (type) => {
	deliveryType.value = type;
};

const selectAddress = () => {
	// 选择地址或自提点逻辑
};

const submitOrder = () => {
	// 提交订单逻辑
};

const goBack = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.checkout-page {
	padding-bottom: 60px;

	.checkout-section {
		background-color: #fff;
		margin: 10px 0;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: transform 0.2s, box-shadow 0.2s;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
		}
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 15px;
		font-weight: bold;
	}

	.delivery-options {
		display: flex;
		align-items: center;
		margin: 15px 0;

		.delivery-option {
			display: inline-flex;
			align-items: center;
			padding: 6px 15px;
			border-radius: 15px;
			border: 1px solid #ddd;
			color: #666;
			margin-right: 10px;

			&.active {
				background-color: var(--primary-color);
				color: white;
				border: none;
			}
		}
	}

	.address-info {
		display: flex;
		align-items: flex-start;
	}

	.address-icon {
		margin-right: 10px;
		margin-top: 3px;
	}

	.address-details {
		flex: 1;
	}

	.address-contact {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.address-text {
		font-size: 13px;
		color: #666;
		line-height: 1.4;
	}

	.address-arrow {
		margin-left: 10px;
	}

	.order-items {
		margin-top: 10px;
	}

	.order-item {
		display: flex;
		padding: 12px;
		border-bottom: 1px solid var(--border-color);
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 10px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

		&:last-child {
			border-bottom: none;
		}
	}

	.order-item-image {
		width: 70px;
		height: 70px;
		border-radius: 5px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.order-item-info {
		flex: 1;
	}

	.order-item-title {
		font-size: 14px;
		margin-bottom: 5px;
		line-height: 1.3;
	}

	.order-item-sku {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.order-item-price-qty {
		display: flex;
		justify-content: space-between;
		font-size: 13px;
	}

	.order-item-price {
		color: var(--primary-color);
		font-weight: bold;
	}

	.payment-option {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid var(--border-color);

		&:last-child {
			border-bottom: none;
		}
	}

	.payment-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.payment-name {
		flex: 1;
		font-size: 14px;
	}

	.checkout-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		font-size: 14px;
	}

	.checkout-row-value {
		color: var(--primary-color);
	}

	.checkout-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 15px;
		border-top: 1px solid var(--border-color);
	}

	.checkout-total {
		flex: 1;
		text-align: right;
		padding-right: 15px;
		font-size: 14px;
	}

	.checkout-total-price {
		color: var(--primary-color);
		font-weight: bold;
		font-size: 18px;
	}

	.checkout-button {
		width: 120px;
		height: 36px;
		background-color: var(--primary-color);
		color: white;
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		line-height: 36px;
		border: none;

		&::after {
			border: none;
		}
	}
}
</style>